<!doctype html>
<html lang="en-us">

<head>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>米环4在线解包/打包工具</title>
    <meta name="description" content>

    <!-- The compiled CSS file -->
    <link rel="stylesheet" href="css/production.css">

    <!-- Web fonts -->
    <link href="css/font.css" rel="stylesheet">

    <!-- favicon.ico. Place these in the root directory. -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
</head>

<body>
    <style>
        input[type=file] {
            display: none;
        }

        .pt3 {
            padding-top: 20px;
        }

        @media screen and (min-width: 120px) and (max-width: 600px) {
            .mb2 {
                font-size: 30px;
            }

            .logo {
                max-height: 150px;
            }
        }
    </style>

    <!-- Header -->
    <header class="align--center pt3">
        <div class="container--lg border--bottom pb3">
            <img class="logo mb3" src="img/logo.png" alt="Carta">
            <h1 class="mb2">米环4在线解包/打包工具</h1>
            <div id="app">
                <div v-loading="loading">
                    <el-alert title="解包请选择bin文件，打包请选择zip文件" type="info" :closable="false" show-icon>
                    </el-alert>
                    <br>
                    <el-upload class="upload-demo" ref="upload" :action="baseUrl + 'watchfacepackage/upload'" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :file-list="fileList" :on-success="onSuccess" :on-error="onError" :auto-upload="true" name="file">
                        <el-button slot="trigger" size="small" type="success">选取文件并上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传zip/bin文件，且不超过10M</div>
                    </el-upload>
                    <el-dialog :visible.sync="visible" title="Hello world">
                        <p>Try Element</p>
                    </el-dialog>
                </div>
                <br>
                <el-button type="text" @click="gotoApp">安卓APP下载</el-button>
            </div>
        </div>
    </header>

    <main>

        <!-- Feature list -->
        <div class="container pt3 mt2 text--gray align--center">
            <p class="mb3">Powered by&nbsp;GiveMeFive</p>
            <!-- <div class="grid-row">
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/assign.svg" alt="Assign to others">
                    <p>Assign to others</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/connected.svg" alt="Stay connected">
                    <p>Stay connected</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/search.svg" alt="Powerful search">
                    <p>Powerful search</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/vault.svg" alt="Put in a vault">
                    <p>Put in a vault</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/messaging.svg" alt="Fast messaging">
                    <p>Fast messaging</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/mail.svg" alt="Share with others">
                    <p>Share with others</p>
                </div>
            </div> -->
        </div>
    </main>

    <!-- Footer -->
    <!-- <footer class="pt1 pb3 align--center-on-mobile">
        <div class="container">
            <div class="grid-row">
            </div>
        </div>
    </footer> -->
    <!-- import Vue before Element -->
    <script src="vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    baseUrl: 'http://212.64.68.41:8086/',
                    visible: false,
                    fileList: [],
                    loading: false
                }
            },
            methods: {
                submitUpload(file, fileList) {
                    this.$refs.upload.submit();
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                onSuccess(response, file, fileList) {
                    this.loading = false;
                    if (response.code == 0) {
                        this.$message({
                            message: '操作成功，即将开始下载',
                            type: 'success'
                        })
                        window.location.href = this.baseUrl + '/watchfacepackage/download?filePath=' + response.data;
                    } else {
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        })
                    }
                    this.fileList = [];
                },
                onError(err, file, fileList) {
                    this.loading = false;
                    if (err.msg) {
                        this.$message({
                            message: err.msg,
                            type: 'warning'
                        })
                    } else {
                        this.$message({
                            message: '服务器错误，请稍后再试',
                            type: 'warning'
                        })
                    }
                    this.fileList = [];

                },
                beforeUpload(file) {
                    var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                    const extension = testmsg === 'bin'
                    const extension2 = testmsg === 'zip'
                    const isLt2M = file.size / 1024 / 1024 < 10
                    if (!extension && !extension2) {
                        this.$message({
                            message: '上传文件只能是 bin、zip!',
                            type: 'warning'
                        });
                    }
                    if (!isLt2M) {
                        this.$message({
                            message: '上传文件大小不能超过 10MB!',
                            type: 'warning'
                        });
                    }
                    let result = extension || extension2 && isLt2M;
                    if (result) {
                        this.loading = true;
                    }
                    return result;
                },
                gotoApp() {
                    window.open('https://www.coolapk.com/apk/tech.pingx.watchface');
                }
            }
        })
    </script>
</body>

</html>